<template>
  <div class="live-watch" @click="isShowGift=0">
    <div class="v-header">
      <div class="icon">
        <img src="../img/live1.png" alt>
      </div>
      <div class="people">
        <div class="box t">一笑而过...</div>
        <div class="box b">28人在线</div>
      </div>
      <div class="gz">关注</div>
      <div class="close" @click="closeLive">
        <img src="../img/close_btn.png" alt>
      </div>
      <!-- <div class="getPs">20人 本次获得：0PS</div> -->
    </div>
    <!-- 注意video元素不要使用display:none隐藏，这会flash模式下swf文件得不到加载，播放器一直处于初始化过程中 -->
    <video
      id="my-video"
      class="video-js"
      x-webkit-airplay="allow"
      webkit-playsinline
      preload="auto"
      bigPlayButton
      @click="gift_list=false"
    >
      <!-- 	<source :src="watchLive.rtmp_pullurl" type="video/mp4">
				<source :src="watchLive.http_pullurl" type="video/x-flv">
      <source :src="watchLive.hls_pullurl" type="application/x-mpegURL">-->
    </video>
    <div class="giftBox" @click="gift_list=true">
      <img src="../img/gift_icon.png" alt>
    </div>
    <live-chat :liveInfo="watchLive" :sendMsg="send_msg"/>
    <!-- <live-gift :anchor="watchLive" v-show="isShowGift"/> -->
    <div class="bottom-nav">
      <div class="left">
        <input v-model="send_msg.text" type="text" class="mesbox" placeholder="说点什么...">
        <input type="button" value="发送" @click="sendMsg()" class="sendmes">
      </div>
      <div class="right" v-show="!showSend">
        <!-- <span @click.stop="isShowGift=true">
          <img src="@/assets/img/live/gift_icon.png">
        </span>-->
      </div>
    </div>
    <div class="giftList" v-if="gift_list">
      <div class="item" v-for="(item,index) in arr" :key="index" @click="clickGiftItem(item)">
        <img :src="item.img" alt>
        <span>{{item.num}}个</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import html5plus from "@/utils/html5plus.js";
import { getLiveLists } from "@/api.js";
import { getGuid } from "@/utils/index";
import liveGift from "@/components/liveGift";
import liveChat from "@/components/liveChat";
import "@/utils/livePlayer-sdk/neplayer.min.js";
export default {
  data() {
    return {
      watchLive: null,
      myPlayer: null,
      isShowGift: false,
      send_msg: {
        text: "",
        send: false
      },
      showSend: false,
      gift_list: false,
      arr: [
        {
          img: require("../img/gift_Baby octopus.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_diamond_ring.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_rose.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_lip.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_stick_candy.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_Chocolate.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_sport_car.png"),
          num: "1000"
        },
        {
          img: require("../img/gift_rocket.png"),
          num: "1000"
        }
      ]
    };
  },
  components: {
    liveChat,
    liveGift
  },
  mounted() {
    // this.watchLive = JSON.parse(localStorage.watchLive);
  },
  methods: {
    closeLive() {
      this.$router.go(-1);
    },
    clickGiftItem(item) {
      this.gift_list = false;
    },
    play() {
      this.myPlayer.enterFullscreen();
      this.myPlayer.play();
    },
    sendMsg() {
      // this.send_msg.send = "text";
    }
  },
  updated() {
    require(["@/assets/img/live.jpg", "@/utils/livePlayer-sdk/video-js.swf"], (
      img,
      swf
    ) => {
      if (!this.watchLive || this.myPlayer) {
        return;
      }
      neplayer.setSWF(swf);
      /*注意： 使用data-setup时，initOptions将无效，因为播放器已经自动加载过了*/
      this.myPlayer = neplayer("my-video", {
        autoplay: !0,
        errMsg7: "直播已结束",
        streamTimeoutTime: 1e4,
        techOrder: ["html5", "flash"],
        //techOrder: ["flash", "html5"], //优先使用的播放模式
        //streamTimeoutTime: 60 * 1000, //拉流超时时间，默认30s
        width: document.documentElement.clientWidth, //设置播放器宽度
        height: document.documentElement.clientHeight, //设置播放器高度
        errorDisplay: false,
        poster: this.watchLive.cover ? this.watchLive.cover : img //视频播放前显示的图片
      });

      function setDataSource(url, obj) {
        var t = void 0;
        switch (url.substring(0, 4)) {
          case "http":
            -1 !== url.indexOf("mp4")
              ? (t = "video/mp4")
              : -1 !== url.indexOf("flv")
              ? (t = "video/x-flv")
              : -1 !== url.indexOf("m3u8") && (t = "application/x-mpegURL");
            break;
          case "rtmp":
            t = "rtmp/flv";
        }
        obj.myPlayer.setDataSource({
          type: t,
          src: url
        });
      }
      setDataSource(this.watchLive.rtmp_pullurl, this);
      // this.myPlayer.setDataSource(this.watchLive.rtmp_pullurl);
      /*this.myPlayer.setDataSource([{
						type: "video/mp4",
						src: this.watchLive.rtmp_pullurl
					},
					{
						type: "video/x-flv",
						src: this.watchLive.http_pullurl
					},
					{
						type: "application/x-mpegURL",
						src: this.watchLive.hls_pullurl
					}
				]);*/
      this.play();
    });
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/livePlayer-sdk/neplayer.min.css';

.video-js {
  width: 100%;
  height: 100%;
}

.v-header {
  width: 100%;
  height: 1.6rem;
  // background: rgba(73, 76, 92, 1);
  position: fixed;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.8);
  z-index: 99;
  padding: 0.7rem 0.5rem 0 0.5rem;

  .icon {
    width: 0.61rem;
    height: 0.61rem;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .people {
    width: 2.5rem;
    height: 0.8rem;
    position: absolute;
    left: 1.2rem;
    bottom: 0.2rem;

    .box {
      line-height: 0.4rem;
      font-size: 15px;
    }

    .b {
      font-size: 12px;
    }
  }

  .close {
    width: 0.65rem;
    height: 0.65rem;
    position: absolute;
    right: 0.32rem;
    bottom: 0.25rem;
    background: #666;
    border-radius: 50%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .gz {
    width: 1.03rem;
    height: 0.48rem;
    position: absolute;
    left: 3.2rem;
    bottom: 0.3rem;
    text-align: center;
    line-height: 0.48rem;
    font-size: 15px;
    background: linear-gradient(141deg, rgba(23, 247, 239, 1), rgba(4, 227, 212, 1), rgba(0, 216, 202, 1));
    border-radius: 15px;
  }
}

.giftBox {
  width: 1rem;
  height: 1rem;
  position: fixed;
  bottom: 0rem;
  right: 0.1rem;
  z-index: 999;

  img {
    width: 0.78rem;
    height: 0.78rem;
    margin-top: 5px;
  }
}

.live-watch {
  position: fixed;
  width: 100%;
  height: 100%;
}

.live-watch .bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #666666;
  z-index: 100;
}

.live-watch .bottom-nav {
  top: auto;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.live-watch .bottom-nav .left {
  display: flex;
  justify-content: flex-start;
}

.live-watch .bottom-nav .right {
  display: flex;
  justify-content: flex-end;
}

.live-watch .bottom-nav img {
  width: 0.6rem;
  margin: 0.3rem;
}

.live-watch .bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1rem;
}

.mesbox {
  background-color: #c7c5c5 !important;
  width: 4.4rem;
  border-radius: 20px;
  height: 0.6rem;
  padding: 0 2px;
  margin-left: 0.2rem;
  text-align: left;
  padding-left: 0.1rem;
}

.sendmes {
  width: 1.2rem;
  height: 0.6rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  border-radius: 21px;
  margin: 0 10px;
  background-color: #228ff8 !important;
}

.giftList {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 4rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;

  .item {
    width: 1.875rem;
    height: 2rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);

    img {
      width: 1.5rem;
      width: 1.2rem;
      display: inline-block;
      margin: 0.1rem auto;
    }

    span {
      font-size: 13px;
    }
  }
}
</style>
